/**
 * 单个全球指数项组件
 */

import React from 'react';
import { GlobalIndexData } from '@shared/types/market';
import { formatNumber, getPnLColor } from '@shared/utils';
import {
  getMarketStatusIcon,
  getMarketStatusText,
} from '@shared/utils/timezoneHelper';

interface IndexItemProps {
  data: GlobalIndexData;
}

const IndexItem: React.FC<IndexItemProps> = ({ data }) => {
  const isPositive = data.change_pct >= 0;
  const changeColor = getPnLColor(data.change_pct);
  const statusIcon = getMarketStatusIcon(data.market_status || 'closed');
  const statusText = getMarketStatusText(data.market_status || 'closed');

  return (
    <div
      style={{
        padding: '12px 16px',
        borderBottom: '1px solid #f0f0f0',
        transition: 'background-color 0.2s',
      }}
      onMouseEnter={(e) => {
        e.currentTarget.style.backgroundColor = '#fafafa';
      }}
      onMouseLeave={(e) => {
        e.currentTarget.style.backgroundColor = 'transparent';
      }}
    >
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
        {/* 左侧：指数名称 */}
        <div style={{ flex: 1 }}>
          <div style={{ display: 'flex', alignItems: 'center', marginBottom: '4px' }}>
            <span style={{ fontSize: '14px', fontWeight: '500', color: '#333' }}>
              {data.name}
            </span>
            <span
              style={{
                marginLeft: '8px',
                fontSize: '12px',
                color: '#999',
              }}
            >
              {statusIcon} {statusText}
            </span>
          </div>
          <div style={{ fontSize: '12px', color: '#999' }}>
            {data.code}
          </div>
        </div>

        {/* 右侧：点位和涨跌 */}
        <div style={{ textAlign: 'right' }}>
          <div style={{ fontSize: '16px', fontWeight: '600', color: '#333', marginBottom: '4px' }}>
            {formatNumber(data.current, { decimals: 2 })}
          </div>
          <div
            style={{
              fontSize: '14px',
              fontWeight: '500',
              color: changeColor,
            }}
          >
            {isPositive ? '+' : ''}
            {formatNumber(data.change, { decimals: 2 })}{' '}
            ({isPositive ? '+' : ''}
            {formatNumber(data.change_pct, { decimals: 2, suffix: '%' })})
          </div>
        </div>
      </div>
    </div>
  );
};

export default IndexItem;

